<template>
  <div class="capital" id='cccccc'>
    <div class="top">
      <div class="left">
        <div class="block">
          <span>收件时间：</span>
          <el-date-picker v-model="time" type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期" range-separator="至"></el-date-picker>
        </div>
        <div class="left_last">
          <span>状态：</span>
          <v-numodule :list='["未读","已读"]' ref="isRead"></v-numodule>
          <button @click="query">查询</button>
          <button @click="reset">重置</button>
        </div>
      </div>
    </div>
    <div class="capital_table">
      <div class="moddle">
        <el-table :data="tableData" border style="width: 100%;" :max-height="maxHeight?maxHeight:maxheight" :row-style="{height:'60px',fontSize:'14px',color:'#30383e'}" :header-cell-style="thstyle" :cell-style="cellStyle" @cell-click="cellclick" min-width='130'>
          <el-table-column v-for="(item,index) in list" :key="index" :prop="item.key" :label="item.title" show-overflow-tooltip="false" align="center"></el-table-column>
          <el-table-column label="操作" show-overflow-tooltip="false" align="center">
            <template slot-scope="scope">
              <span style="margin-right: 20px;color: #356afa;cursor: pointer;" @click='$router.push({name:"Inbox", params:{id:tableData[scope.$index].id}})'>详情</span>
              <span @click="onDelete(tableData[scope.$index].id)" style="color: #f54949;cursor: pointer;">删除</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="bottom">
      <div class="block">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-size="pageSize" prev-text="上一页" next-text="下一页" layout="prev, pager, next, jumper, total" :total="total"></el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import table from "../common/table.vue";
import numoudle from "../common/numodule.vue";
import $ from "jquery";
export default {
  components: {
    "v-table": table,
    "v-numodule": numoudle
  },
  watch: {
    time: function(newTime) {
      if (!newTime) return;
      this.startTime = t.gshDate(newTime[0]);
      this.endTime = t.gshDate(newTime[1]);
    }
  },
  created() {
    this.$parent.flag = true;
    this.addressee();
  },
 mounted() {
 let that=this;
   setTimeout(()=>{
     $(".capital .capital_table").height($(".capital").height()-$(".top").height()-92);
   that.maxheight =document.querySelector(".capital_table").offsetHeight + "";
   window.onresize=function () {
     $(".capital .capital_table").height($(".capital").height()-$(".top").height()-92);
     that.maxheight =document.querySelector(".capital_table").offsetHeight + "";
   };
   },200)
 },
  methods: {
    addressee() {
      // 收件箱展示
      u.addressee(
        {
          type: 1,
          currentCount: this.currentCount,
          pageSize: this.pageSize
        },
        data => {
          if (data || data.code == 200) {
            this.total = data.data.total;
            this.tableData = data.data.list.map((item, index) => {

              return {
                tda: index + 1,
                tdb: item.reciverName,
                tdc: item.sendTitle,
                tdd: item.sendContent,
                date: item.sendTime,
                tdt: item.strIsRead,
                id: item.id
              };
            });
          }
        }
      );
    },
    query() {
      this.isRead = ["未读", "已读"].indexOf(this.$refs.isRead.value);
      //根据时间和状态查询接口
      u.receiptQuery(
        {
          type: 1,
          isRead: this.isRead == -1 ? null : this.isRead,
          endTime: this.endTime,
          startTime: this.startTime,
          currentCount: this.currentCount,
          pageSize: this.pageSize
        },
        data => {
          //如果不符合条件数据为空
          if (data.data.list.length == 0) {
            this.total = 0;
            this.tableData = data.data.list.map((item, index) => {
              return {
                tableData:''
              };
            });
          } else {
            this.total = data.data.total;
            this.tableData = data.data.list.map((item, index) => {
              return {
                tda: index + 1,
                tdb: item.reciverName,
                tdc: item.sendTitle,
                tdd: item.sendContent,
                date: item.sendTime,
                tdt: item.strIsRead,
                id: item.id
              };
            });
          }
        }
      );
    },
    onDelete(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "success"
      })
        .then(() => {
          //收件箱删除
          u.receiptDelete({id: id},
            data => {
              if (data.code == 200) {
                this.addressee();
                this.$message({
                  type: "success",
                  message: "删除成功!"
                });
              }
            }
          );
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    handleSizeChange(val) {},
    handleCurrentChange(val) {
      this.currentPage = val;
      this.currentCount = this.pageSize * (val - 1);
      this.addressee();
    },
    //重置时间和状态
    reset() {
      this.endTime = null
      this.startTime = null
      this.time=''
      this.$refs.isRead.value = ''
      this.isRead=null
      this.currentCount=0
      this.addressee()
    },
    thstyle({ row, column, rowIndex, columnIndex }) {
      return {
        background: "rgb(37, 40, 52)",
        fontSize: "14px",
        color: "white",
        fontWeight: 400,
        height: "60px"
      };
    },
    cellStyle({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === this.cloumn) {
        //指定列号
        return { color: "#5286ff", cursor: "pointer" };
      } else {
        return "";
      }
    },
    cellclick(row, column, cell, event) {
      if (this.cloumn === 8) {
        if (column.label == "操作") {
          this.$parent.popflag = true;
          this.$emit("pop", true);
        }
      }
      if (this.cloumn === 15) {
        if (column.label == "操作") {
          this.$router.push({ path: "/pickupPay" });
        }
      }
      if (this.cloumn === 11) {
        if (column.label == "操作") {
        }
      }
    }
  },
  data() {
    return {
      maxheight:'660px',
      id: "",
      total: 0,
      currentPage: 1,//默认第一页
      currentCount: 0,
      pageSize: 10,
      endTime: null,
      startTime: null,
      isRead: null,//读取状态
      time: "", //绑定时间控件值
      tableData: [],
      list: [
        { key: "tda", title: "ID" },
        { key: "tdb", title: "收件人" },
        { key: "tdc", title: "邮件主题" },
        { key: "tdd", title: "邮件摘要" },
        { key: "date", title: "收件时间" },
        { key: "tdt", title: "状态" }
      ]
    };
  }
};
</script>
<style lang='less' scoped>
@import "../../../static/common/capital.less";
</style>
<style lang='less'>
#cccccc{
  .el-date-editor {
    width: 350px !important;
    border: 1px solid #b4b4b4;
  }
  .el-date-editor .el-range__close-icon {
    width: 0px !important;
  }
  .el-date-editor .el-range-input {
    width: 60% !important;
  }
  .el-date-editor .el-range-separator {
    // width: 10% !important;
    padding: 0;
  }

.el-time-spinner__item.active {
    width: 34px;
    margin-left: 13px;
}
// .capital > .top > .left > .left_last {
//     margin-left: 85px;
// }
.capital > .top > .left > .block {
    margin: 0px;
}
.block span{
   font-size:14px;
}

.el-input__icon {
    width: 30px;
}
}
</style>

